<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<script type="text/javascript" src="./lib/cuon-matrix.js"></script>
<script type="text/javascript" src="./lib/cuon-utils.js"></script>
<script type="text/javascript" src="./lib/webgl-debug.js"></script>
<script type="text/javascript" src="./lib/webgl-utils.js"></script>
<script type="text/javascript">
	var VSHADER_SOURCE =
	'attribute vec4 a_Position;'+
	'attribute vec4 a_Color;'+
	'varying vec4 v_Color;'+
	'void main(){'+
	'gl_Position = a_Position;'+
	'gl_PointSize = 10.0;'+
	'v_Color = a_Color;'+
	'}';

	var FSHADER_SOURCE =
	'precision mediump float;'+
	'varying vec4 v_Color;'+
	'void main(){'+
	'gl_FragColor = v_Color;'+
	'}';

	var Tx = 0.5, Ty = 0.5, Tz = 0.0;
	function start () {
		var canvas = document.getElementById("webgl");
		var gl = getWebGLContext(canvas);
		if (!gl){
			alert('gl fail');
			return;
		}
		if(!initShaders(gl,VSHADER_SOURCE,FSHADER_SOURCE)){
			alert('shader fail');
			return;
		}

		var n = initVertexBuffers(gl);
		if (n<0){
			alert('vertexbuffers fail');
			return;
		}

		// var u_Translation = gl.getUniformLocation(gl.program,'u_Translation');
		// if (!u_Translation) {
		// 	alert('uniform fail');
		// 	return;
		// }
		// 
		var frames = 0
		function renderer(){
			frames++;
			render(gl,n,frames);
			requestAnimationFrame(renderer)
		}
		renderer()
	}

	function render(gl,n,frames){
		gl.clearColor(0,0,0,1);
		gl.clear(gl.COLOR_BUFFER_BIT);
		gl.drawArrays(gl.POINTS,0,n);
	}

	function initVertexBuffers(gl){
		// var vertices = new Float32Array([-0.5,0.5,0.5,0.5,-0.5,-0.5,0.5,-0.5]);
		var vertices = new Float32Array([
   		 -1.0, 0,-0.9, 1.0,0.0,0.0,

   		 -0.5, 0,-1.0, 0.0,1.0,0.0,

   		 0, 0,1.0,  0.0,0.0,1.0,

   		 0.5, 0,0.9, 1.0,1.0,1.0,


  		]);
		var n = 4;
		var vertexBuffer = gl.createBuffer();
		if(!vertexBuffer){
			alert('createBuffer fail');
			return;
		}
		gl.bindBuffer(gl.ARRAY_BUFFER,vertexBuffer);
		gl.bufferData(gl.ARRAY_BUFFER,vertices,gl.STREAM_DRAW);

		var a_Position = gl.getAttribLocation(gl.program,'a_Position');
		if(a_Position <0){
			alert('a_Position fail')
			return;
		}
		var a_Color = gl.getAttribLocation(gl.program,'a_Color');
		if(a_Color <0){
			alert('a_Color fail')
			return;
		}
		gl.vertexAttribPointer(a_Position,3,gl.FLOAT,false,vertices.BYTES_PER_ELEMENT*6,0);
		gl.vertexAttribPointer(a_Color,3,gl.FLOAT,false,vertices.BYTES_PER_ELEMENT*6,vertices.BYTES_PER_ELEMENT*3);

		gl.enableVertexAttribArray(a_Position);
		gl.enableVertexAttribArray(a_Color);
		return n;
	}

</script>
<body onload="start()">
<canvas id="webgl" width="500" height="500"></canvas>
</body>
</html>